import React, { useState } from 'react'
import free from '../../../public/image/free.webp'
import Calendar from './Calendar';
import { DownOutlined,SearchOutlined, SmileOutlined } from '@ant-design/icons';
import { Button,Input, Space } from 'antd';
import type { MenuProps } from 'antd';
import { Dropdown } from 'antd';
function Recoss(props: any) {

    let [dropdown, setDropdown] = useState('全部')
    const items: MenuProps['items'] = props.options.map((item: any) => (
        {
            key: item.value,
            label: (
                <span onClick={() => {
                    headleDropdown(item.value);
                }}>
                    {item.label}
                </span>
            )
        }
    ))
    const headleDropdown = (value: string) => {
        setDropdown(value)
    }

    let [rotate, setRotate] = useState(false)

    const headleOpenChange = (e: boolean) => {
        setRotate(e)
    }

    return (
        <div className='reco_top'>
            <img src={free} alt="" style={{ width: '260px' }} />
            <div className='reco_search'>
                <Space.Compact style={{ width: '100%' }}>
                    <Dropdown onOpenChange={headleOpenChange} menu={{ items }} placement="bottom">
                        <Button style={{
                            width: '80px', display: 'flex',
                            alignItems: 'center'
                        }}><b>{dropdown}</b>&nbsp;<DownOutlined style={{ fontSize: '10px', transition: 'transform 0.3s ease', transform: rotate ? 'rotate(180deg)' : 'rotate(0deg)' }} /></Button>
                    </Dropdown>
                    <Input placeholder='邀请函' />
                    <Button type='primary'><SearchOutlined style={{ fontWeight: 'bold', fontSize: '20px' }} /></Button>
                </Space.Compact>
                <ul>
                    <span>邀请函</span>
                    <span>个人简历</span>
                    <span>招聘</span>
                    <span>五一放假通知</span>
                    <span>婚礼邀请函</span>
                    <span>读书会</span>
                    <span>二维码</span>
                </ul>
            </div>
            <div className='reco_calendar'>
                <Calendar></Calendar>
            </div>
        </div>
    )
}

export default Recoss